<div id="login_div" style="width: 100%; text-align: center;">
    
    <table id="login_form" style="margin: 0 auto">      
	<tr>
	  <td colspan="2" align="center">
	    <div>
	      <h2>Login</h2>
	    </div>
	    <div>
	      <img src="img/lemon.jpg" style="width: 200px;"/>
	    </div>
	  </td>
	  </tr>

 	<tr>
	  <td style="width: 100px;">
	    <label id="name_label">Username</label>
	  </td>
	  <td  style="width: 100px;">
	    <input type="text" name="name" id="name" size="10"/>
	  </td>
	</tr>

	<tr>
	  <td>
	    <label id="password_label">Password</label>
	  </td>
	  <td>
	     <input type="password" name="pass" id="password" size="10"/>
	  </td>
	</tr>


	<tr>
	  <td>
	     <div>
	        <input type="checkbox" checked="checked" id="remember"/>
	        <span style="font-size: small;">Remember me</span>
	     <div>	    
	  </td>
	  <td>
	     <div>
	        <input type="button" value="Login" onClick="js:getLogin();"/>
	     </div>
	  </td>
	</tr>


	<tr>
	  <td colspan="2">
	     <a href="#" onClick="js:getContent('signup.html', 'main');">Sign up</a>
	     <a href="#" onClick="js:remindPassword();">Remind password</a>
	     <a href="#" onClick="js:getContent('interactive.html', 'main');"><span style="color: red;">Skip this!</span></a>
	  </td>
	</tr>
     
    </table>
    
</div>

<script type="text/javascript" charset="utf-8">
  $('#name').val(localStorage.getItem('user'));
  $('#password').val(localStorage.getItem('pass'));
</script>
